<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/8/22
  Time: 下午1:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/resources.jsp" %>
<html>
<head>
    <title>招商加盟配置</title>
    <script>
        $(function () {
            $('#begin_time,#end_time').datetimepicker({
                language : 'zh-CN',
                format : 'yyyy-MM-dd HH:mm:ss'
            });
        })
    </script>
    <style type="text/css">
        .choose-banners {
            position: relative;
            padding: 25px 15px 15px;
            margin: 15px 0;
            background-color: #fafafa;
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
            border-color: #e5e5e5 #eee #eee;
            border-style: solid;
            border-width: 1px 0;
        }

        #filePicker {
            display: inline-block;
            line-height: 1.428571429;
            vertical-align: middle;
            margin: 0 12px 0 0;
        }

        .uploader-list {
            width: 100%;
            overflow: hidden;
        }

        #uploader-banners .thumbnail {
            /*width: 110px;*/
            /*height: 110px;*/
        }
        .file-item {
            float: left;
            position: relative;
            margin: 0 20px 20px 0;
            padding: 4px;
        }

        .begin_upload_btn {
            height: 40px;
            position: relative;
        }

        .file-item .info {
            position: absolute;
            left: 4px;
            bottom: 4px;
            right: 4px;
            height: 20px;
            line-height: 20px;
            text-indent: 5px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            z-index: 10;
        }
        .file-item .error {
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            background: red;
            color: white;
            text-align: center;
            height: 20px;
            font-size: 14px;
            line-height: 23px;
        }


        .file-item .success {
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            height: 20px;
            line-height: 20px;
            text-indent: 5px;
            background: rgba(63, 117, 4, 0.88);
            color: white;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            z-index: 10;
        }

        .image-remove {
            position: absolute;
            right: 6px;
            top: 6px;
            cursor: pointer;
            color: white;
            z-index: 10000;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/ems/plugins/webuploader/webuploader.css">
    <script type="text/javascript" src="/ems/plugins/webuploader/webuploader.js"></script>

    <style type="text/css">
        .ems_edit_content {
            width: 100%;
            margin-top: 29px;
        }
        .s_type {
            font-size: 14px;
            text-indent: 10px;
            color: #383333;
            font-weight: bold;
        }
        .add_type_btn,.add_banners_btn {
            margin-top: 5px;
            position: absolute;
            right: 30px;
        }
        .btype_edit {
            font-size: 14px;
            cursor: pointer;
            margin-left: 15px;
        }
    </style>
</head>
<body>


<div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingBanners">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#union_banners" aria-expanded="true" aria-controls="union_banners">
                    招商加盟首页Banner配置
                </a>
            </h4>
        </div>
        <div id="union_banners" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingBanners">
            <button type="button" class="btn btn-primary add_banners_btn" id="add_banners_btn"> <i class="glyphicon glyphicon-check" aria-hidden="true"></i> 保存</button>
            <div class="panel-body">
                <div style="margin-right: 10px;margin-left: 10px;">
                    <div class="ems_edit_content">
                        <form class="form-horizontal ems_internal_form">
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <!--dom结构部分-->
                                    <div id="uploader-banners" class="choose-banners">
                                        <!--用来存放item-->
                                        <div id="fileList" class="uploader-list">
                                            <c:if test="${not empty union.id}">
                                                <c:forEach items="${union.banners}" var="banner" varStatus="obj">
                                                    <c:if test="${not empty banner}">
                                                        <div id="WU_FILE_${obj['index']+100}" class="file-item thumbnail upload-state-done">
                                                            <img class="edit_img" style="height: 100px;" src="${banner}" rurl="${banner}">
                                                            <span class="image-remove"><i class="glyphicon glyphicon-remove-circle"></i></span>
                                                        </div>
                                                    </c:if>
                                                </c:forEach>
                                            </c:if>
                                        </div>
                                        <p style="font-size: 14px;color: #8a7974">请上传规格为750px * 360px的图片</p>
                                        <div id="filePicker" class="webuploader-container">选择图片</div>
                                        <button id="upBtn" class="begin_upload_btn btn btn-default">开始上传</button>
                                    </div>
                                </div>
                            </div>
                            <c:if test="${not empty union.id}">
                                <c:forEach items="${union.urls}" var="url" varStatus="obj">
                                    <c:if test="${not empty url}">
                                        <div class="form-group" id="url_WU_FILE_${obj['index']+100}">
                                            <label class="col-sm-3 control-label"></label>
                                            <div class="col-sm-12"> <input type="text" required=""  value="${url}" class="form-control banner_url" placeholder="请配置第${obj['index']+100}张图片跳转链接">
                                            </div>
                                        </div>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div>
    <div class="panel panel-default">

        <div class="panel-heading" role="tab" id="headingArticleTitle">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#union_article_title" aria-expanded="true" aria-controls="union_article_title">
                    招商加盟文章类型配置
                </a>
            </h4>
        </div>
        <div id="union_article_title" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingArticleTitle">
            <button type="button" class="btn btn-primary add_type_btn" id="add_btype_btn"> <i class="glyphicon glyphicon-plus" aria-hidden="true"></i> 添加</button>
            <div class="panel-body">
                <div style="margin-right: 10px;margin-left: 10px;">
                    <div class="ems_edit_content">
                        <div>
                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <c:forEach items="${btypeList}" var="btype" varStatus="obj">
                                    <div class="panel panel-default">
                                        <div class="panel-heading" role="tab" id="headingOne_${obj['index']}">
                                            <h4 class="panel-title">
                                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne_${obj['index']}" aria-expanded="false" aria-controls="collapseOne_${obj['index']}">
                                                        ${btype.title} <a class="btype_edit" rid="${btype.id}" style="color: #304852">编辑</a>
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapseOne_${obj['index']}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne_${obj['index']}">
                                            <div class="panel-body">
                                                <c:forEach items="${btype.stypeList}" var="stype">
                                                    <p class="s_type">${stype.title}</p>
                                                </c:forEach>
                                            </div>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $("#add_btype_btn").on("click",function () {
       window.location.href = "/ems/union/typeAdd";
    })

    $("#add_banners_btn").on("click",function () {

        var data = {};
        var banners = [];
        $("#fileList").find(".upload-state-done").each(function (i,v) {
            banners.push($(v).find("img").attr("rurl"));
        });
        data["banners"] = banners.join(",");
        var bannerUrls = [];
        $(".banner_url").each(function (index,val) {
            var url = $.trim($(val).val());
            if( url == "") {
                bannerUrls.push("#");
            }else {
                bannerUrls.push(url);
            }
        });
        data["bannerUrls"] = bannerUrls.join(",");
        $.emsAjax({
            url:"/ems/union/bannerSave",
            type:"POST",
            data:data,
            success:function (resp) {
                if (resp.status == "000") {
                    $.toast("保存成功");
                }else {
                    $.toast("保存失败","cancel");
                }
            }
        })
    });

    $(".btype_edit").on("click",function () {
        window.location.href = "/ems/union/typeEdit?id=" + $(this).attr("rid");
    });
</script>



<div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">查询条件</h3>
        </div>
        <div class="panel-body">
            <form class="form-inline ems_search_form">
                <div class="form-group">
                    <input type="text" class="form-control" name="title" placeholder="标题">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="begin_time" name="begin_time" placeholder="开始时间">
                    <label>-</label>
                    <input type="text" class="form-control" id="end_time"  name="end_time" placeholder="结束时间">
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-info btn-search">查询</button>
                    <button type="button" class="btn btn-default btn-reset">清空</button>
                </div>
            </form>
        </div>
    </div>
</div>
    <div class="ems_table_content">
    <div class="panel panel-default">
        <div class="panel-heading">招商联盟列表</div>
        <div id="table_tools">
            <div class="form-inline" role="form">
                <button type="button" id="union_add" class="btn btn-outline btn-success">
                    <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                    添加
                </button>
                <button type="button" id="union_edit" class="btn btn-outline btn-primary">
                    <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                    修改
                </button>
                <button type="button" id="union_publish" class="btn btn-outline btn-warning">
                    <i class="glyphicon glyphicon-share" aria-hidden="true"></i>
                    发布
                </button>
                <button type="button" id="union_delete" class="btn btn-outline btn-danger">
                    <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                    删除
                </button>

            </div>
        </div>
        <table id="unionTable"
               data-url="/ems/union/pagination"
               data-show-export="true">
            <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-field="type_str">类别</th>
                <th data-field="title">文章标题</th>
                <th data-field="create_time">创建时间 </th>
                <th data-field="status" data-formatter="statusFormat">状态</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<script>
    function removeBannres($target) {

        $parent = $target.parent();
        $("#url_" + $parent.attr("id")).remove();
        $parent.remove();

        //重新编排
        var count = 1;
        $(".banner_url").each(function (index,val) {
            $(this).attr("placeholder","请配置第"+count+"张图片跳转链接");
            count++;
        });

    }
    jQuery(function() {
        var $ = jQuery,
            $list = $('#fileList'),
            ratio = window.devicePixelRatio || 1,
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            uploader;

        uploader = WebUploader.create({

            auto: false,
            swf: '/ems/plugins/webuploader/Uploader.swf',
            server: '/ems/upload/fupload',
            pick: '#filePicker',
            accept: {
                title: 'Images',
                extensions: 'jpg,jpeg,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
        });

        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail" style="width: 110px;height: 110px;">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '<span class="image-remove"><i class="glyphicon glyphicon-remove-circle"></i></span>' +
                    '</div>'
                ),
                $img = $li.find('img');

            $list.append( $li );
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>无法生成缩略图</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );

            $(".image-remove").on("click",function () {
                removeBannres($(this))
            })
        });

        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');

            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
            }
            $percent.css( 'width', percentage * 100 + '%' );
        });

        uploader.on( 'uploadSuccess', function(file,resp) {

            $( '#'+file.id ).addClass('upload-state-done');
            var $li = $( '#'+file.id ),
                $succeed = $li.find('div.success');

            if ( !$succeed.length ) {
                $succeed = $('<div class="success">上传成功</div>').appendTo( $li );
            }

            $li.find("img").attr("rurl",resp.url);

            var index = 0;
            var $successItem = $("#fileList").find(".upload-state-done");
            if (!$successItem || $successItem.length == 0) {
                index ++;
            }else {
                index = $successItem.length;
            }
            var html = '<div class="form-group" id="url_'+file.id+'"><div class="col-sm-12"> <input type="text" required value="" class="form-control banner_url" placeholder="请配置第'+index+'张图片跳转链接"> </div> </div>';
            $(".ems_internal_form").append(html);
        });

        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });

        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });

        $("#upBtn").on( 'click', function(event) {
            if ($("#fileList").children().length == 0) {
                $.errorAlert("请选择图片上传");
                return;
            }
            uploader.upload();
            return false;
        });
    });
</script>
<script>
    $(function () {

        $(".image-remove").on("click",function () {
            removeBannres($(this));
        })
    });

    function statusFormat(srcValue) {

        if (srcValue == 1) {
            return "<span style='color: #3cb371;font-weight: bold' >已发布</span>";
        }else if(srcValue == 0){
            return "<span style='color: red;font-weight: bold'>未发布</span>";
        }
    }
</script>

<script>
        $(function () {
            $("#unionTable").createTable();

            //添加
            $("#union_add").on("click",function () {
                window.location.href = "/ems/union/edit"
            })

            //编辑
            $("#union_edit").on("click",function () {
                var selectRows =  $('#unionTable').bootstrapTable('getSelections');
                if (selectRows.length == 0) {
                    $.errorAlert("请选择要编辑的数据");
                    return;
                }
                if (selectRows.length > 1) {
                    $.errorAlert("暂时不支持多行数据编辑");
                    return;
                }
                window.location.href = "/ems/union/edit?id=" + selectRows[0].id;
            })

            //发布
            $("#union_publish").on("click",function (event) {

                var selectRows =  $('#unionTable').bootstrapTable('getSelections');
                if (selectRows.length == 0) {
                    $.errorAlert("请选择要发布的文章");
                    return;
                }
                if (selectRows.length > 1) {
                    $.errorAlert("暂时不支持同时发布多篇文章");
                    return;
                }

                var item = selectRows[0];
                if (item.status == 1) {
                    $.errorAlert("文章已经发布，无需重复发布");
                    return;
                }

                var id = item.id;
                $.confirmAlert("确定要发布该模块吗？",function(){
                    $.ajax({
                        data:{id:id},
                        type:"POST",
                        url:"/ems/union/publish",
                        success:function(resp) {
                            if (resp.status == "000") {
                                $.toast("发布成功");
                                search("#unionTable",getQueryParams());
                            }else {
                                $.toast("发布失败","cancel");
                            }
                        }
                    });
                });
            });

            //删除
            $("#union_delete").on("click",function () {
                var selectRows =  $('#unionTable').bootstrapTable('getSelections');
                if (selectRows.length == 0) {
                    $.errorAlert("请选择要删除的数据");
                    return;
                }

                var articleIdList = "";
                for (var i = 0;i<selectRows.length;i++) {
                    articleIdList += selectRows[i].id + ",";
                }
                articleIdList = articleIdList.substring(0,articleIdList.length - 1);

                $.confirmAlert("你确定要删除这些数据吗",function(){
                    $.emsAjax({
                        data:{articleIdList:articleIdList},
                        type:"POST",
                        url:"/ems/union/delete",
                        success:function(resp) {
                            if (resp.status == "000") {
                                $.toast(resp.message,function () {
                                    search("#unionTable",getQueryParams());
                                });
                            }else {
                                $.toast(resp.message,"cancel");
                            }
                        }
                    });
                });
            });

        });
    </script>
</body>
</html>
